<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link data-th-replace="commons::res">
<style type="text/css">
	body{
		padding: 15px
	}
</style>
</head>
<body>
	<form class="layui-form">
		<input type="hidden" name="id" data-th-value="${user?.id}">
		<div class="layui-form-item">
			<div class="layui-form-label">账号:</div>
			<div class="layui-input-block">
				<input type="text" class="layui-input" lay-verify="required" data-th-value="${user?.account}" name="account" placeholder="请输入用户账号">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-form-label">密码:</div>
			<div class="layui-input-block">
				<input data-th-if="${user==null}" type="password" class="layui-input" lay-verify="required" name="password" placeholder="请输入用户账号">
				<input data-th-if="${user!=null}" type="password" class="layui-input" name="password" placeholder="请输入用户账号">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-form-label">确认密码:</div>
			<div class="layui-input-block">
				<input data-th-if="${user==null}" type="password" class="layui-input" lay-verify="required|repass" name="repassword" placeholder="请输入用户账号">
				<input data-th-if="${user!=null}" type="password" class="layui-input" name="repassword" placeholder="请输入用户账号">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-form-label">是否激活:</div>
			<div class="layui-input-block">
				<input type="checkbox" name="enable" lay-skin="switch" lay-text="激活|停用" data-th-checked="${user==null?true:user?.enable}">
			</div>
		</div>
		<div class="layui-form-item" data-th-unless="${admin}">
			<div class="layui-form-label">用户角色:</div>
			<div class="layui-input-block">
				<div id="roles"></div>
			</div>
		</div>
		<div class="layui-form-item" data-th-if="${admin}">
			<div class="layui-form-label">用户角色:</div>
			<div class="layui-input-block">
				<input type="text" class="layui-input" disabled="disabled" value="超级管理员用户,无法更改角色信息">
			</div>
		</div>
		
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button type="button" lay-submit class="layui-btn" lay-filter='user'>保存</button>
			</div>
		</div>
	</form>
	<script type="text/javascript">
		layui.use(['form','jquery','layer','xmSelect'],function(){
			let form=layui.form
				,$=layui.jquery
				,layer=layui.layer
				,xmSelect=layui.xmSelect;
			form.verify({
				repass:function(value,item){
					if($("[name='password']").val()!=value){
						return "俩次密码输入不一致";
					}
				}
			})
			//渲染多选
			if($("#roles").length>0){
				$.get("[[@{/role/find}]]?page=false",function(rs){
					let data=[];
					for(let role of rs.data){
						data.push({name:role.name,value:role.id});
					}
					//渲染多选
					let demo1 = xmSelect.render({
					    el: '#roles', 
					    name:"roleIds",
					    data
					})
					let id=$("[name=id]").val();
					//查询用户当前选择的角色
					if(id){
						$.get("[[@{/role/find}]]?userId="+id,function(rs){
							let data=[];
							for(let role of rs.data){
								data.push({name:role.name,value:role.id});
							}
							demo1.setValue(data);//默认选中
						},'json');
					}
				},'json');
			}
			form.on("submit(user)",function(data){
				if(!data.field.enable){
					data.field.enable=false;
				}
				data.field.roleIds=data.field.roleIds.split(",");
				$.ajax({
					url:'[[@{/user/save}]]',
					type:'post',
					dataType:'json',
					data:data.field,
					success:function(rs){
						if(rs.success){
							var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
							parent.reload();
							parent.layer.msg("保存成功",{icon:6});
							parent.layer.close(index);
							
						}else{
							layer.msg("保存失败",{icon:5});
						}
					}
				})
				return false;
			})
		})
	</script>
</body>
</html>